<div class="func-form">
  
  <form class="left-main card" [formGroup]="validateForm">
    <div class="sub-title">
      <img src="assets/images/business/dyForm/one.svg" alt="">
      <span>基本信息</span>
    </div>
    

    <div class="form-ipt">
      <nz-form-label nzRequired [nzNoColon]="true">用户类型</nz-form-label>
      <nz-form-control>
        <nz-select
          style="width: 260px;"
          nzShowSearch
          nzAllowClear
          nzPlaceHolder="选择用户类型"
          formControlName="customerType"
          (ngModelChange)="onCustomerTypeChange($event)"
        >
          <nz-option nzLabel="个人" nzValue="0"></nz-option>
          <nz-option nzLabel="单位" nzValue="1"></nz-option>
        </nz-select>
        <app-err-msg *ngIf="validateForm.get('customerType')?.dirty && validateForm.get('customerType')?.invalid"
          errMsg="请选择用户类型"
        ></app-err-msg>
      </nz-form-control>
    </div>

    <div class="form-ipt">
      <nz-form-label nzRequired [nzNoColon]="true" class="PingFangSC-Regular-14">用户编号</nz-form-label>
      <nz-form-control [nzValidateStatus]="usageCodeValidate" nzHasFeedback>
        <input formControlName="usageCode" nz-input placeholder="用户编号" 
        />
        <app-err-msg *ngIf="(validateForm.get('usageCode')?.dirty && validateForm.get('usageCode')?.invalid) || usageCodeValidate === 'error'"
          errMsg="请输入正确的用户编号"
        ></app-err-msg>
      </nz-form-control>
    </div>

    <!-- <div class="form-ipt">
      <nz-form-label [nzNoColon]="true" class="PingFangSC-Regular-14">地址</nz-form-label>
      <nz-form-control>
        <input formControlName="address" nz-input placeholder="地址" />
        <app-err-msg *ngIf="validateForm.get('address')?.dirty && validateForm.get('address')?.value == ''"
          errMsg="根据用户编号查询地址为空"
        ></app-err-msg>
      </nz-form-control>
    </div> -->

    <!-- 水电联办 -->
    <!-- <div class="form-ipt">
      <nz-form-label [nzNoColon]="true" class="PingFangSC-Regular-14">水电联办</nz-form-label>
      <nz-form-control>
        <nz-switch #waterElectric 
          formControlName="waterElectric" 
          (ngModelChange)="onWaterElectricChange($event)">
        </nz-switch>
      </nz-form-control>
    </div>
    <div class="form-ipt" *ngIf="validateForm.get('waterElectric')?.value">
      <nz-form-label [nzNoColon]="true" class="PingFangSC-Regular-14">用电编号</nz-form-label>
      <nz-form-control>
        <input formControlName="electricNo" nz-input placeholder="用电编号" />
        <app-err-msg *ngIf="validateForm.get('electricNo')?.dirty && validateForm.get('electricNo')?.invalid"
          errMsg="用电编号不能为空"
        ></app-err-msg>
      </nz-form-control>
    </div> -->

    <!-- 单位 -->
    <!-- <div class="form-ipt" *ngIf="validateForm.get('customerType').value === '1'">
      <nz-form-label [nzNoColon]="true" class="PingFangSC-Regular-14">新业主姓名</nz-form-label>
      <nz-form-control>
        <input formControlName="userName" nz-input placeholder="新业主姓名" />
        
        <app-err-msg *ngIf="validateForm.get('userName')?.dirty && validateForm.get('userName')?.invalid"
          errMsg="新业主姓名不能为空"
        ></app-err-msg>
      </nz-form-control>
    </div> -->

    <!-- <div class="form-ipt" *ngIf="validateForm.get('customerType').value === '1'">
      <nz-form-label [nzNoColon]="true" class="PingFangSC-Regular-14">新业主电话</nz-form-label>
      <nz-form-control>
        <input formControlName="usertel" nz-input placeholder="新业主电话" />
        <app-err-msg *ngIf="validateForm.get('usertel')?.dirty && validateForm.get('usertel')?.invalid"
          errMsg="请输入正确格式的新业主电话"
        ></app-err-msg>
      </nz-form-control>
    </div> -->

    <!-- 申请人电话 -->
    <div class="form-ipt">
      <nz-form-label nzRequired [nzNoColon]="true" class="PingFangSC-Regular-14">申请人电话</nz-form-label>
      <nz-form-control>
        <input formControlName="usertel" nz-input placeholder="申请人电话" 
        />
        
        <div *ngIf="(validateForm.get('usertel')?.dirty && validateForm.get('usertel')?.invalid)">
          <app-err-msg *ngIf="validateForm.get('usertel')?.errors?.['pattern']" >
            手机号码格式不正确
          </app-err-msg>
          <app-err-msg *ngIf="validateForm.get('usertel')?.errors?.['required']" >
            手机号码不能为空
          </app-err-msg>
        </div>
      </nz-form-control>
    </div>
    <!-- 申请人证件类型 -->
    <div class="form-ipt">
      <nz-form-label nzRequired [nzNoColon]="true" title="申请人证件类型">申请人证件类型</nz-form-label>
      <nz-form-control>
        <nz-select
          style="width: 260px;"
          nzShowSearch
          nzAllowClear
          nzPlaceHolder="申请人证件类型"
          formControlName="cardType"
          [nzLoading]="cardTypeLoading"
        >
          <nz-option 
            *ngFor="let item of cardTypeList;"
            [nzLabel]="item.sclvalue" [nzValue]="item.sclvalue"></nz-option>
        </nz-select>
        <app-err-msg *ngIf="validateForm.get('cardType')?.dirty && validateForm.get('cardType')?.invalid"
          errMsg="申请人证件类型不能为空"
        ></app-err-msg>
      </nz-form-control>
    </div>
    <!-- 申请人证件号 -->
    <div class="form-ipt">
      <nz-form-label nzRequired [nzNoColon]="true" class="PingFangSC-Regular-14">申请人证件号</nz-form-label>
      <nz-form-control>
        <input formControlName="cardIdNum" nz-input placeholder="申请人证件号" 
        />
        
        <app-err-msg *ngIf="validateForm.get('cardIdNum')?.dirty && validateForm.get('cardIdNum')?.invalid"
          errMsg="申请人证件号不能为空"
        ></app-err-msg>
      </nz-form-control>
    </div>

    <!-- 产权单位名称 -->
    <div class="form-ipt" *ngIf="validateForm.get('customerType')?.value === '1'">
      <nz-form-label [nzNoColon]="true" class="PingFangSC-Regular-14" title="产权单位名称">产权单位名称</nz-form-label>
      <nz-form-control>
        <input formControlName="userName" nz-input placeholder="产权单位名称" />
        <div *ngIf="validateForm.get('userName')?.dirty && validateForm.get('userName')?.errors">
          <app-err-msg *ngIf="validateForm.get('userName')?.errors?.['required']"
            errMsg="产权单位名称不能为空"
          ></app-err-msg>
          <app-err-msg *ngIf="validateForm.get('userName')?.errors?.['maxByteLength']"
            errMsg="产权单位名称字数超出限制(最多 50 汉字 100 英文字符)"
          ></app-err-msg>
        </div>
      </nz-form-control>
    </div>

    <div class="form-ipt" *ngIf="validateForm.get('customerType')?.value === '1'">
      <nz-form-label [nzNoColon]="true" class="PingFangSC-Regular-14" title="统一社会信用代码">统一社会信用代码</nz-form-label>
      <nz-form-control>
        <input formControlName="corporateCode" nz-input placeholder="统一社会信用代码" />
        
        <app-err-msg *ngIf="validateForm.get('corporateCode')?.dirty && validateForm.get('corporateCode')?.invalid"
          errMsg="请输入正确格式的统一社会信用代码"
        ></app-err-msg>
      </nz-form-control>
    </div>

    <div class="form-ipt" *ngIf="validateForm.get('customerType')?.value === '1'">
      <nz-form-label [nzNoColon]="true" class="PingFangSC-Regular-14">经办人姓名</nz-form-label>
      <nz-form-control>
        <input formControlName="jbrname" nz-input placeholder="经办人姓名" />
        
        <app-err-msg *ngIf="validateForm.get('jbrname')?.dirty && validateForm.get('jbrname')?.invalid"
          errMsg="输入正确格式的姓名"
        ></app-err-msg>
      </nz-form-control>
    </div>

    <div class="form-ipt" *ngIf="validateForm.get('customerType')?.value === '1'">
      <nz-form-label [nzNoColon]="true" class="PingFangSC-Regular-14">经办人电话</nz-form-label>
      <nz-form-control>
        <input formControlName="jbrphone" nz-input placeholder="经办人电话" />
        <app-err-msg *ngIf="validateForm.get('jbrphone')?.dirty && validateForm.get('jbrphone')?.invalid"
          errMsg="请输入正确格式的经办人电话"
        ></app-err-msg>
      </nz-form-control>
    </div>

    <div class="form-ipt" *ngIf="validateForm.get('customerType')?.value === '1'">
      <nz-form-label [nzNoColon]="true" class="PingFangSC-Regular-14" title="经办人证件号码">经办人证件号码</nz-form-label>
      <nz-form-control>
        <input formControlName="jbrzjbh" nz-input placeholder="经办人证件号码" />
        
        <app-err-msg *ngIf="validateForm.get('jbrzjbh')?.dirty && validateForm.get('jbrzjbh')?.invalid"
          errMsg="经办人证件号码不能为空"
        ></app-err-msg>
      </nz-form-control>
    </div>

  </form>

  <!-- <form class="left-main card"  *ngIf="validateForm.get('customerType')?.value === '0'" style="margin-top: 20px;" [formGroup]="basicLiveForm">
    <div class="sub-title">
      <img src="assets/images/business/dyForm/one.svg" alt="">
      <span>新业主信息</span>
    </div>
    <div class="form-ipt">
      <nz-form-label style="width: 220px;" [nzNoColon]="true" class="PingFangSC-Regular-14">产权人数(请按实填写产权人数)</nz-form-label>
      <nz-form-control>
        <nz-input-number [nzMax]="30" formControlName="personNum" (ngModelChange)="personNumChange($event)"  [nzMin]="0" [nzStep]="1"></nz-input-number>
      </nz-form-control>
    </div>
    <div class="basic-live-info" style="width: 100%;" formGroupName="basicLiveInfo">
      <div style="display: flex;flex-wrap: wrap;justify-content: space-between;" *ngFor="let item of controlArray; let i = index">
        <nz-divider nzOrientation="left" nzDashed [nzText]="text">
          <ng-template #text>新业主 {{ i + 1 }} 
            <span nz-icon nzType="close-circle" nzTheme="outline"
              *ngIf="!ownerChangeDataId" (click)="removeBasicLiveInfo(item)"
              nzTheme="outline" style="font-size: 16px; color: var(--theme-color);cursor: pointer;"
            ></span>
          </ng-template>
        </nz-divider>
        
        <div [ngClass]="{'form-ipt-width': control.type === 'upload'}" *ngFor="let control of item.controlNames; let j = index">
          <div class="form-ipt" *ngIf="control.type !== 'upload'">
            <nz-form-label nzRequired [nzNoColon]="true" class="PingFangSC-Regular-14">{{ control.label }}</nz-form-label>
            <nz-form-control>
              <input *ngIf="control.type === 'input'" [formControlName]="control.controlName" nz-input placeholder="" />
              <nz-date-picker style="width: 260px;" *ngIf="control.type === 'date'" [formControlName]="control.controlName"></nz-date-picker>
              <nz-select *ngIf="control.type === 'select'"
                style="width: 260px;"
                nzShowSearch
                nzAllowClear
                nzPlaceHolder="新业主证件类型"
                [formControlName]="control.controlName"
                (ngModelChange)="onCardTypeChange($event, i)"
                [nzLoading]="syrzjlxLoading"
              >
                <nz-option 
                  *ngFor="let item of syrzjlxList;"
                  [nzLabel]="item.name" [nzValue]="item.id"></nz-option>
              </nz-select>
              <app-err-msg *ngIf="basicLiveForm.get('basicLiveInfo')?.get(control.controlName)?.dirty && basicLiveForm.get('basicLiveInfo')?.get(control.controlName)?.invalid && control.label ==='电话'"
                [errMsg]="'请输入正确格式的' + control.label + '号码'"
              ></app-err-msg>
              <app-err-msg *ngIf="basicLiveForm.get('basicLiveInfo')?.get(control.controlName)?.dirty && basicLiveForm.get('basicLiveInfo')?.get(control.controlName)?.invalid && control.label ==='证件号码'"
              [errMsg]="'请输入正确格式的' + control.label"
              ></app-err-msg>
              <app-err-msg *ngIf="basicLiveForm.get('basicLiveInfo')?.get(control.controlName)?.dirty && basicLiveForm.get('basicLiveInfo')?.get(control.controlName)?.invalid && control.label ==='姓名'"
                [errMsg]="control.label + '不能为空'"
              ></app-err-msg>
            </nz-form-control>
          </div>
          <div *ngIf="control.type === 'upload'">
            <app-file-upload style="width: 100%;"
              (uploadBack)="uploadBack($event, control.controlName)" 
              [title]="'身份证明文件'"
              subTitle="请上传 png, jpg, gif, jpeg, pdf, bmp格式的图片,最多可上传 2 张,每张图片大小不超过 10M"
              [fileNum]="2"
              [mediaType]="['png', 'jpg', 'gif', 'jpeg', 'pdf', 'bmp']"
              [required]="'true'"
              [uploadAvailable]="uploadAvailable"
              [deleteAvailable]="uploadAvailable"
              [previewIdStr]="basicLiveForm.get('basicLiveInfo')?.get(control.controlName)?.value"
            >
            </app-file-upload>
            <app-err-msg *ngIf="basicLiveForm.get('basicLiveInfo')?.get(control.controlName)?.dirty && basicLiveForm.get('basicLiveInfo')?.get(control.controlName)?.invalid"
              [errMsg]="control.label + '不能为空'"
            ></app-err-msg>
          </div>
          
        </div>
        
        
      </div>
    </div>
  </form> -->

  <form class="left-main card" [formGroup]="validateForm" style="margin-top: 20px">
    <div class="sub-title">
      <img src="assets/images/business/dyForm/one.svg" alt="">
      <span>使用人信息</span>
    </div>
    

    <div class="form-ipt">
      <nz-form-label nzRequired [nzNoColon]="true" class="PingFangSC-Regular-14">使用人姓名</nz-form-label>
      <nz-form-control>
        <input (ngModelChange)="syrnameValidator($event)" (blur)="syrnameBlur()" #syrname formControlName="syrname" nz-input placeholder="使用人姓名" />
        
        <app-err-msg *ngIf="syrnameErrorMsg"
          [errMsg]="syrnameErrorMsg"
        ></app-err-msg>
      </nz-form-control>
    </div>

    <div class="form-ipt">
      <nz-form-label nzRequired [nzNoColon]="true" class="PingFangSC-Regular-14">使用人电话</nz-form-label>
      <nz-form-control>
        <input formControlName="syrphone" nz-input placeholder="使用人电话" />
        <app-err-msg *ngIf="validateForm.get('syrphone')?.dirty && validateForm.get('syrphone')?.invalid"
          errMsg="请输入正确格式的使用人电话"
        ></app-err-msg>
      </nz-form-control>
    </div>

    <div class="form-ipt">
      <nz-form-label nzRequired [nzNoColon]="true" title="使用人证件类型">使用人证件类型</nz-form-label>
      <nz-form-control>
        <nz-select
          style="width: 260px;"
          nzShowSearch
          nzAllowClear
          nzPlaceHolder="使用人证件类型"
          formControlName="syrzjlx"
          [nzLoading]="cardTypeLoading"
        >
          <nz-option 
            *ngFor="let item of cardTypeList;"
            [nzLabel]="item.sclvalue" [nzValue]="item.sclvalue"></nz-option>
        </nz-select>
        <app-err-msg *ngIf="validateForm.get('syrzjlx')?.dirty && validateForm.get('syrzjlx')?.invalid"
          errMsg="使用人证件类型不能为空"
        ></app-err-msg>
      </nz-form-control>
    </div>

    <div class="form-ipt">
      <nz-form-label nzRequired [nzNoColon]="true" class="PingFangSC-Regular-14">使用人证件号</nz-form-label>
      <nz-form-control>
        <input formControlName="syrzjh" nz-input placeholder="使用人证件号" />
        <app-err-msg *ngIf="validateForm.get('syrzjh')?.dirty && validateForm.get('syrzjh')?.invalid"
          errMsg="请输入正确格式的使用人证件号"
        ></app-err-msg>
      </nz-form-control>
    </div>

    <app-file-upload style="width: 100%;"
      (uploadBack)="uploadBack($event, 'syrcardPic')" 
      [title]="'使用人身份证明文件'"
      [fieldName]="'使用人身份证明文件'"
      subTitle="请上传 png, jpg, gif, jpeg, pdf, bmp格式的图片,最多可上传 2 张,每张图片大小不超过 10M"
      [fileNum]="2"
      [mediaType]="['png', 'jpg', 'gif', 'jpeg', 'pdf', 'bmp']"
      [required]="'true'"
      [previewIdStr]="fileForm.get('syrcardPic')?.value"
      [uploadAvailable]="uploadAvailable"
      [deleteAvailable]="uploadAvailable"
      [errMsg]="(fileForm.get('syrcardPic')?.dirty && fileForm.get('syrcardPic')?.invalid)?'请上传使用人身份证明文件' : ''"
    >
    </app-file-upload>
  </form>

  <!-- 银行划扣信息 -->
  <!-- <form class="left-main card" [formGroup]="bankTransferInfo" style="margin-top: 20px">
    <div class="sub-title">
      <img src="assets/images/icons/base.svg" alt="">
      <span>银行划扣信息</span>
    </div>

    <div class="form-ipt" style="width: 100%;justify-content: flex-start;">
      <nz-form-label nzRequired [nzNoColon]="true" class="PingFangSC-Regular-14">办理银行划账</nz-form-label>
      <nz-form-control>
        <nz-switch #dealBankTransfer formControlName="dealBankTransfer" (ngModelChange)="onDealBankTransferChange($event)"></nz-switch>
      </nz-form-control>
    </div>

    <div class="form-ipt" *ngIf="bankTransferInfo.get('dealBankTransfer')?.value">
      <nz-form-label nzRequired [nzNoColon]="true" class="PingFangSC-Regular-14">银行账号</nz-form-label>
      <nz-form-control>
        <input formControlName="account" nz-input placeholder="银行账号"/>
        <app-err-msg *ngIf="bankTransferInfo.get('account')?.dirty && bankTransferInfo.get('account')?.invalid"
          errMsg="请输入正确的银行账号"
        ></app-err-msg>
      </nz-form-control>
    </div>

    <div class="form-ipt" *ngIf="bankTransferInfo.get('dealBankTransfer')?.value">
      <nz-form-label nzRequired [nzNoColon]='true' class="PingFangSC-Regular-14">开户银行</nz-form-label>
      <nz-form-control>
        <nz-select *ngIf="!ownerChangeData"
          style="width: 260px;"
          nzShowSearch
          nzServerSearch
          nzPlaceHolder="请输入开户银行"
          nzAllowClear
          formControlName="bankId"
          (nzOnSearch)="bankSearch($event)"
          [nzNotFoundContent]="'未查找到开户银行，请检查银行账号'"
          [nzLoading]="bankIsLoading"
          (ngModelChange)="onBankChange($event)"
        >
          <nz-option *ngFor="let bank of bankList" [nzLabel]="bank.bankName" [nzValue]="bank.bankId"> </nz-option>
        </nz-select>
        <input *ngIf="ownerChangeData" nz-input formControlName="bankName"  placeholder="开户银行"/>
        <app-err-msg *ngIf="bankTransferInfo.get('bankId')?.dirty && bankTransferInfo.get('bankId')?.invalid"
          errMsg="开户银行不能为空"
        ></app-err-msg>
      </nz-form-control>

    </div>

    <div class="form-ipt" *ngIf="bankTransferInfo.get('dealBankTransfer')?.value">
      <nz-form-label [nzNoColon]="true" class="PingFangSC-Regular-14">银行账户名称</nz-form-label>
      <nz-form-control>
        <input formControlName="accountName" nz-input placeholder="个人：张**；单位：**公司" />
        
        <app-err-msg *ngIf="bankTransferInfo.get('accountName')?.dirty && bankTransferInfo.get('accountName')?.invalid"
          errMsg="银行账户名称不能为空"
        ></app-err-msg>
      </nz-form-control>
    </div>

    <div class="form-ipt" *ngIf="bankTransferInfo.get('dealBankTransfer')?.value">
      <nz-form-label nzRequired [nzNoColon]="true" class="PingFangSC-Regular-14">证件号</nz-form-label>
      <nz-form-control>
        <input formControlName="accountCardId" nz-input placeholder="开户人或单位 证件号" />
        <app-err-msg *ngIf="bankTransferInfo.get('accountCardId')?.dirty && bankTransferInfo.get('accountCardId')?.invalid"
          errMsg="请输入正确格式的证件号"
        ></app-err-msg>
      </nz-form-control>
    </div>

    <div class="form-ipt" *ngIf="bankTransferInfo.get('dealBankTransfer')?.value">
      <nz-form-label nzRequired [nzNoColon]="true" class="PingFangSC-Regular-14">开户人手机号</nz-form-label>
      <nz-form-control>
        <input formControlName="accountPhone" nz-input placeholder="开户人手机号" />
        <app-err-msg *ngIf="bankTransferInfo.get('accountPhone')?.dirty && bankTransferInfo.get('accountPhone')?.invalid"
          errMsg="请输入正确开户人手机号"
        ></app-err-msg>
      </nz-form-control>
    </div>

    <div class="form-ipt" *ngIf="bankTransferInfo.get('dealBankTransfer')?.value">
      <nz-form-label nzRequired [nzNoColon]="true" class="PingFangSC-Regular-14">{{ validateForm.get('customerType')?.value === '1' ? '单位联系电话' : '联系电话' }}</nz-form-label>
      <nz-form-control>
        <input formControlName="contactPhone" nz-input placeholder="联系电话" />
        <app-err-msg *ngIf="bankTransferInfo.get('contactPhone')?.dirty && bankTransferInfo.get('contactPhone')?.invalid"
          errMsg="请输入正确联系电话"
        ></app-err-msg>
      </nz-form-control>
    </div>

    <div class="form-ipt" *ngIf="bankTransferInfo.get('dealBankTransfer')?.value">
      <nz-form-label [nzRequired]="validateForm.get('customerType')?.value === '1' ? true : false" [nzNoColon]="true" class="PingFangSC-Regular-14">电子邮箱</nz-form-label>
      <nz-form-control>
        <input formControlName="email" nz-input placeholder="电子邮箱" />
        <div *ngIf="bankTransferInfo.get('email')?.dirty && bankTransferInfo.get('email')?.invalid">
          <app-err-msg *ngIf="bankTransferInfo.get('email')?.errors?.['required']"
            errMsg="请输入邮箱"
          ></app-err-msg>

          <app-err-msg *ngIf="bankTransferInfo.get('email')?.errors?.['pattern']"
            errMsg="请输入正确格式的邮箱"
          ></app-err-msg>

          <app-err-msg *ngIf="bankTransferInfo.get('email')?.errors?.['maxByteLength']"
            errMsg="邮箱字数超过限制(最多50个字符)"
          ></app-err-msg>
        </div>
      </nz-form-control>
    </div>

    <div class="form-ipt" *ngIf="bankTransferInfo.get('dealBankTransfer')?.value">
      <nz-form-label [nzNoColon]="true" class="PingFangSC-Regular-14">邮寄地址</nz-form-label>
      <nz-form-control>
        <input formControlName="mailAddress" nz-input placeholder="邮寄地址" />
      </nz-form-control>
    </div>

    <div class="form-ipt" *ngIf="bankTransferInfo.get('dealBankTransfer')?.value">
      <nz-form-label [nzNoColon]="true" class="PingFangSC-Regular-14"></nz-form-label>
      <nz-form-control>
        <div style="width: 260px;display: flex;justify-content: space-between;">
          <a  style="color: #06c2d3;"(click)="viewPDF()">签署业务办理单</a>
        </div>
      </nz-form-control>
    </div>

    <app-file-upload style="width: 100%;margin-bottom: 16px;" *ngIf="bankTransferInfo.get('dealBankTransfer')?.value"
      (uploadBack)="uploadBack($event, 'accountPic')" 
      [title]="'开户人身份证明信息'"
      subTitle="请上传 png, jpg, gif, jpeg, pdf, bmp格式的图片,最多可上传 2 张,每张图片大小不超过 10M"
      [fileNum]="2"
      [mediaType]="['png', 'jpg', 'gif', 'jpeg', 'pdf', 'bmp']"
      [required]="'true'"
      [previewIdStr]="fileForm.get('accountPic')?.value"
      [uploadAvailable]="uploadAvailable"
      [deleteAvailable]="uploadAvailable"
      [errMsg]="(fileForm.get('accountPic')?.dirty && fileForm.get('accountPic')?.invalid)?'开户人身份证明信息' : '' "
    >
    </app-file-upload>

    <app-file-upload style="width: 100%;" *ngIf="bankTransferInfo.get('dealBankTransfer')?.value"
      (uploadBack)="uploadBack($event, 'identityPic')" 
      [title]="'银行账户信息'"
      subTitle="请上传 png, jpg, gif, jpeg, pdf, bmp格式的图片,最多可上传 1 张,每张图片大小不超过 10M"
      [mediaType]="['png', 'jpg', 'gif', 'jpeg', 'pdf', 'bmp']"
      [required]="'true'"
      [previewIdStr]="fileForm.get('identityPic')?.value"
      [uploadAvailable]="uploadAvailable"
      [deleteAvailable]="uploadAvailable"
      [errMsg]="(fileForm.get('identityPic')?.dirty && fileForm.get('identityPic')?.invalid)?'请上传 银行账户信息' : ''"
    >
    </app-file-upload>

  </form> -->

  <!-- 水表信息 -->
  <form class="left-main card" [formGroup]="meterInfo" style="margin-top: 20px">
    <div class="sub-title">
      <img src="assets/images/business/dyForm/one.svg" alt="">
      <span>水表信息</span>
    </div>
    <div class="form-ipt">
      <nz-form-label [nzNoColon]="true" class="PingFangSC-Regular-14">水表行度</nz-form-label>
      <nz-form-control>
        <input formControlName="meterNum" nz-input placeholder="水表行度"/>
        <app-err-msg 
          *ngIf="meterInfo.get('meterNum')?.dirty && meterInfo.get('meterNum')?.invalid"
          errMsg="请输入正确的水表行度(输入范围：1-999999)"
        ></app-err-msg>
      </nz-form-control>
    </div>

    <app-file-upload style="width: 100%;margin-bottom: 16px;"
      (uploadBack)="meterUploadBack($event, 'waterPic')" 
      [title]="'水表图片上传'"
      subTitle="请上传 png, jpg, gif, jpeg, pdf, bmp格式的图片,最多可上传 3 张,每张图片大小不超过 10M"
      [fileNum]="3"
      [mediaType]="['png', 'jpg', 'gif', 'jpeg', 'pdf', 'bmp']"
      [required]="'false'"
      [previewIdStr]="meterInfo.get('waterPic')?.value"
      [uploadAvailable]="uploadAvailable"
      [deleteAvailable]="uploadAvailable"
      [errMsg]="(meterInfo.get('waterPic')?.dirty && meterInfo.get('waterPic')?.invalid)?'请上传水表图片' : ''"
    >
    </app-file-upload> 
  </form>

  <div class="left-upload card" [formGroup]="fileForm">
    <div class="sub-title">
      <img src="assets/images/business/dyForm/four.svg" alt="">
      <span>其他资料上传</span>
    </div>

    <app-file-upload 
      (uploadBack)="uploadBack($event, 'waterSupplyAgreement')" 
      [title]="'供水协议'"
      [fileNum]="9"
      subTitle="重新签订的供水协议(请上传png, jpg, gif, jpeg, pdf, bmp格式的图片,最多可上传 9 张,每张图片大小不超过 10M)"
      [mediaType]="['png', 'jpg', 'gif', 'jpeg', 'pdf', 'bmp']"
      [previewIdStr]="fileForm.get('waterSupplyAgreement')?.value"
      [uploadAvailable]="uploadAvailable"
      [deleteAvailable]="uploadAvailable"
      [errMsg]="(fileForm.get('waterSupplyAgreement')?.dirty && fileForm.get('waterSupplyAgreement')?.invalid)?'请上传 供水协议' : ''"
    >
    </app-file-upload> <br>

    <app-file-upload 
      (uploadBack)="uploadBack($event, 'propertyOwnershipCertificate')" 
      [title]="'产权证明'"
      [fileNum]="9"
      subTitle="不动产权证、房产证(商品房情况)或宅基地证(集体用地情况) 原件, (请上传png, jpg, gif, jpeg, pdf, bmp格式的图片,最多可上传 9 张,每张图片大小不超过 10M)"
      [mediaType]="['png', 'jpg', 'gif', 'jpeg', 'pdf', 'bmp']"
      [required]="'true'"
      [previewIdStr]="fileForm.get('propertyOwnershipCertificate')?.value"
      [uploadAvailable]="uploadAvailable"
      [deleteAvailable]="uploadAvailable"
      [errMsg]="(fileForm.get('propertyOwnershipCertificate')?.dirty && fileForm.get('propertyOwnershipCertificate')?.invalid)?'请上传 产权证明' : ''"
    >
    </app-file-upload> <br>

    <div *ngIf="validateForm.get('customerType')?.value === '1'">
      <app-file-upload 
        (uploadBack)="uploadBack($event, 'jbrcardPic')" 
        [title]="'经办人身份证明文件'"
        [fileNum]="2"
        subTitle="上传与证件编号一致的文件（身份证正反面/军官证/回乡证/护照原件）(请上传 png, jpg, gif, jpeg, pdf, bmp格式的图片,最多可上传 2 张,每张图片大小不超过 10M)"
        [mediaType]="['png', 'jpg', 'gif', 'jpeg', 'pdf', 'bmp']"
        [required]="'true'"
        [previewIdStr]="fileForm.get('jbrcardPic')?.value"
        [uploadAvailable]="uploadAvailable"
        [deleteAvailable]="uploadAvailable"
        [eCertificateObj]="jbrcardPic"
        [fieldKey]="'jbrcardPic'"
        [groupForm]="validateForm"
        [errMsg]="(fileForm.get('jbrcardPic')?.dirty && fileForm.get('jbrcardPic')?.invalid) ? '请上传 经办人身份证明文件' : ''"
      >
      </app-file-upload> <br>

      <app-file-upload 
        (uploadBack)="uploadBack($event, 'companyApplication')" 
        [title]="'单位申请证明'"
        subTitle="上传加盖业主单位公章的关于申请更改用户名称的证明文件(请上传 png, jpg, gif, jpeg, pdf, bmp格式的图片,最多可上传 1 张,每张图片大小不超过 10M)"
        [fileNum]="1"
        [mediaType]="['png', 'jpg', 'gif', 'jpeg', 'pdf', 'bmp']"
        [required]="'true'"
        [previewIdStr]="fileForm.get('companyApplication')?.value"
        [uploadAvailable]="uploadAvailable"
        [deleteAvailable]="uploadAvailable"
        [errMsg]="(fileForm.get('companyApplication')?.dirty && fileForm.get('companyApplication')?.invalid)?'请上传 单位申请证明' : ''"
      >
      </app-file-upload> <br>

      <app-file-upload 
        *ngIf="bankTransferInfo.get('dealBankTransfer')?.value"
        (uploadBack)="uploadBack($event, 'balanceAuthPic')" 
        [title]="'划扣授权书'"
        subTitle="加盖单位公章的代扣水费及污水费的划扣授权书(请上传 png, jpg, gif, jpeg, pdf, bmp格式的图片,最多可上传 1 张,每张图片大小不超过 10M)"
        [fileNum]="1"
        [mediaType]="['png', 'jpg', 'gif', 'jpeg', 'pdf', 'bmp']"
        [required]="'true'"
        [previewIdStr]="fileForm.get('balanceAuthPic')?.value"
        [uploadAvailable]="uploadAvailable"
        [deleteAvailable]="uploadAvailable"
        [errMsg]="(fileForm.get('balanceAuthPic')?.dirty && fileForm.get('balanceAuthPic')?.invalid) ? '请上传 划扣授权书' : ''"
      >
      </app-file-upload> <br>

      <app-file-upload 
        (uploadBack)="uploadBack($event, 'businessAuthPic')" 
        [title]="'业务委托书'"
        subTitle="产权单位关于委托经办人办理银行代扣业务的委托书(请上传 png, jpg, gif, jpeg, pdf, bmp格式的图片,最多可上传 2 张,每张图片大小不超过 10M)"
        [fileNum]="2"
        [mediaType]="['png', 'jpg', 'gif', 'jpeg', 'pdf', 'bmp']"
        [required]="'true'"
        [previewIdStr]="fileForm.get('businessAuthPic')?.value"
        [uploadAvailable]="uploadAvailable"
        [deleteAvailable]="uploadAvailable"
        [errMsg]="(fileForm.get('businessAuthPic')?.dirty && fileForm.get('businessAuthPic')?.invalid)?'请上传 业务委托书' : ''"
      >
      </app-file-upload><br>

      <app-file-upload 
        (uploadBack)="uploadBack($event, 'corporatePic')" 
        [title]="'营业执照图片'"
        subTitle="营业执照图片(请上传 png, jpg, gif, jpeg, pdf, bmp格式的图片,最多可上传 2 张,每张图片大小不超过 10M)"
        [fileNum]="2"
        [mediaType]="['png', 'jpg', 'gif', 'jpeg', 'pdf', 'bmp']"
        [required]="'true'"
        [previewIdStr]="fileForm.get('corporatePic')?.value"
        [uploadAvailable]="uploadAvailable"
        [deleteAvailable]="uploadAvailable"
        [errMsg]="(fileForm.get('corporatePic')?.dirty && fileForm.get('corporatePic')?.invalid)?'请上传 营业执照图片' : ''"
      >
      </app-file-upload><br>
    </div>

    <!-- 其他附件 -->
    <app-file-upload 
      (uploadBack)="uploadBack($event, 'otherPic')" 
      [title]="'其他附件'"
      subTitle="可在此处补充资料，如地址证明，街道证明等(请上传 png, jpg, gif, jpeg, pdf, bmp格式的图片,最多可上传 9 张,每张图片大小不超过 10M)"
      [mediaType]="['png', 'jpg', 'gif', 'jpeg', 'pdf', 'bmp']"
      [fileNum]="9"
      [previewIdStr]="fileForm.get('otherPic')?.value"
      [uploadAvailable]="uploadAvailable"
      [deleteAvailable]="uploadAvailable"
      [errMsg]="(fileForm.get('otherPic')?.dirty && fileForm.get('otherPic')?.invalid)?'请上传 其他附件' : ''"
    >
    </app-file-upload>
  </div>

  <div class="left-btn" style="margin-bottom: 20px;">
    <div class="notPreview" *ngIf="!ownerChangeData">
      <button [nzLoading]="btnLoading" type="button" nz-button nzType="default" (click)=onReset()>取消</button>
      <button [nzLoading]="btnLoading" type="button" nz-button nzType="primary" (click)="onSubmit()">提交</button>
    </div>

    <div class="preview" *ngIf="ownerChangeData">
      <button nz-button (click)="goBack()">返回</button>
    </div>
  </div>

  <nz-modal
    [(nzVisible)]="modalIsVisible" 
    nzTitle="银行划扣协议" 
    (nzOnCancel)="modalHandleCancel()" 
    (nzOnOk)="modalHandleOk()"
    [nzOkText]="'签署'"
    [nzContent]="modalContent"
    nzCancelBtn="确定"
    [nzWidth]="800"
  >
  </nz-modal>
  <ng-template #modalContent>
    <nz-spin [nzTip]="'等待中。。。'" [nzSize]="'large'" [nzSpinning]="nzSpinning">
      <div id="pdfpreview" class="modal-content" style="height: 420px;">
      </div>
    </nz-spin>
  </ng-template>

  <nz-modal
    [(nzVisible)]="signModalVisible" 
    nzTitle="签署银行划扣协议" 
    (nzOnCancel)="signModalCancel()" 
    (nzOnOk)="signModalOk()"
    [nzContent]="signModalContent"
    [nzWidth]="650"
    [nzFooter]="null"
  >
  </nz-modal>
  <ng-template #signModalContent>
    <div id="sign-name" class="modal-content">
      <p>请在下方签名：</p>
      <canvas style="border: 1px solid #ccc;" id="name-canvas">
        您的浏览器不支持canvas签名，请更换Google chrome
      </canvas>
      <div class="name-canvas-btn" style="text-align: right;">
        <button (click)="clearName()" type="button" style="border-radius: 0;" nz-button nzType="default">清除</button>
        <button (click)="saveName()" type="button" style="border-radius: 0;margin-left: 16px;" nz-button nzType="primary">确认签署</button>
      </div>
    </div>
  </ng-template>
</div>